<script setup>
import { ref, watch } from 'vue'
import { ElTooltip } from 'element-plus'
import { useAddRoleStore } from '../../store/addRole'
import addRole from './addRole.vue'
import role from '../../api/role'
import { useRoleListStore } from '../../store/roleList'
const addRoleStore = useAddRoleStore()
const roleListStore = useRoleListStore()
const roleName = ref('')
const roleCode = ref('')
const status = ref()
const time = ref('')
const showSrearch = ref(true)
function changeShowSerach() {
    showSrearch.value = !showSrearch.value
}
async function searchRole() {
    await role.getSpecieRole(roleName.value, roleCode.value, status.value, time.value, 1, 5).then(res => {
        roleListStore.setPermissionList(res.data.data.data)
        roleListStore.total=res.data.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        roleListStore.changeLoading()
    })
}
async function deleteRole() {
    await role.deleteRole(roleListStore.selectedIds).then(res => {
    }).catch(err => {
        console.log(err)
    })
    await role.getAllRole(roleListStore.pageNum, roleListStore.pageSize).then(res => {
        roleListStore.roleList = res.data.data.data
        roleListStore.total = res.data.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        roleListStore.changeLoading()
    })
}
async function EditRole() {
    await role.getEditRoleDetail(roleListStore.selectedIds[0]).then(res => {
        addRoleStore.addRole=res.data.data
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        addRoleStore.setOpen(true)
    })
}
</script>
<template>
    <div class="permissionHeader">
        <div class="first-row" v-show="showSrearch">
            <div class="form-item">
                <label>角色名称</label>
                <el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
            </div>
            <div class="form-item">
                <label>角色字符</label>
                <el-input v-model="roleCode" placeholder="请输入角色描述"></el-input>
            </div>
            <div class="form-item">
                <label>状态</label>
                <el-select v-model="status" clearable placeholder="请选择状态">
                    <el-option label="正常" :value=1></el-option>
                    <el-option label="停用" :value=0></el-option>
                </el-select>
            </div>
        </div>
        <div class="second-row" v-show="showSrearch">
            <div class="form-item">
                <label>创建时间</label>
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss">
                </el-date-picker>
            </div>
            <div class="form-actions">
                <el-button type="primary" @click="searchRole">搜索</el-button>
                <el-button @click="">重置</el-button>
            </div>
        </div>
        <div class="third-row">
            <div class="form-item action-buttons">
                <el-button type="success" @click="addRoleStore.setOpen(true)"><el-icon>
                        <Plus />
                    </el-icon>新增</el-button>
                <el-button :disabled="roleListStore.selectedIds.length!==1" type="warning" @click="EditRole"><el-icon>
                        <Edit />
                    </el-icon>修改</el-button>
                <el-button :disabled="roleListStore.selectedIds.length==0" type="danger" @click="deleteRole"><el-icon>
                        <Delete />
                    </el-icon>删除</el-button>
                <el-button type="info"><el-icon>
                        <Bottom />
                    </el-icon>导出</el-button>
                <el-tooltip effect="dark" :content="showSrearch ? '隐藏搜索' : '显示搜索'" placement="top">
                    <el-icon @click="changeShowSerach" class="icon-search">
                        <Search />
                    </el-icon>
                </el-tooltip>
            </div>
        </div>
    </div>
    <addRole />
</template>
<style scoped>
/* CSS变量定义 */
.permissionHeader {
    /* 颜色变量 */
    --primary-color: #409eff;
    --hover-color: #66b1ff;
    --border-color: #ebeef5;
    --bg-color: #f8f9fa;

    /* 尺寸变量 */
    --form-gap: 18px;
    --label-width: 70px;
    --input-width: 220px;
    --radius: 4px;
    --button-gap: 8px;
    --icon-size: 18px;
    --mobile-breakpoint: 768px;

    /* 高度相关 */
    --input-height: 32px;
    --button-vertical-padding: 7px;
    --container-padding: 16px 20px;
}

/* 容器样式 */
.permissionHeader {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--container-padding);
    background: var(--bg-color);
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 表单项通用样式 */
.form-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 260px;
}

.form-item label {
    width: var(--label-width);
    font-size: 13px;
    color: #606266;
    text-align: right;
    flex-shrink: 0;
    line-height: 1.2;
}

/* 行布局 */
.first-row,
.second-row,
.third-row {
    display: flex;
    gap: var(--form-gap);
    flex-wrap: wrap;
}

.second-row {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.third-row {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* 表单控件 */
:deep(.el-input),
:deep(.el-select),
:deep(.el-date-editor) {
    width: var(--input-width);
    max-width: 100%;
    flex: 1;

    /* 调整Element组件内置高度 */
    --el-input-height: var(--input-height);
    --el-input-inner-height: calc(var(--input-height) - 2px);
}

:deep(.el-input__wrapper) {
    border-radius: var(--radius);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 10px;
    min-height: var(--input-height);
}

:deep(.el-input__wrapper:hover),
:deep(.el-select:hover .el-input__wrapper) {
    border-color: var(--hover-color);
    box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.1);
}

/* 日期选择器 */
:deep(.el-date-editor) {
    --el-input-height: var(--input-height);

    .el-range-separator {
        padding: 0 6px;
        line-height: var(--el-input-inner-height);
    }

    .el-range__close-icon,
    .el-range__icon {
        height: var(--el-input-inner-height);
    }
}

/* 按钮样式 */
.form-actions {
    display: flex;
    gap: var(--button-gap);
    margin-left: auto;
    flex-wrap: wrap;
}

.el-button {
    padding: var(--button-vertical-padding) 18px;
    border-radius: var(--radius);
    font-size: 13px;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        transform 0.1s;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.el-button--primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.el-button--primary:hover {
    background: var(--hover-color);
    border-color: var(--hover-color);
    transform: translateY(-0.5px);
}

.el-button:active {
    transform: translateY(0.5px);
}

/* 按钮组样式 */
.action-buttons {
    display: flex;
    gap: var(--button-gap);
    flex-wrap: wrap;
    width: 100%;
}

.el-button :deep(.el-icon) {
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: 5px;
}

/* 搜索图标 */
.icon-search {
    cursor: pointer;
    color: var(--primary-color);
    margin-left: auto;
    padding: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;

    &:hover {
        background: rgba(64, 158, 255, 0.08);
        border-radius: 50%;
    }
}

/* 响应式适配 */
@media (max-width: 768px) {
    .permissionHeader {
        padding: 12px 16px;
        gap: 10px;
    }

    .form-item {
        min-width: 100%;
        gap: 4px;
    }

    :deep(.el-input),
    :deep(.el-select),
    :deep(.el-date-editor) {
        width: 100% !important;
    }

    .form-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 6px;
    }

    .action-buttons .el-button {
        flex: 1 1 45%;
        padding: 6px 10px;
        font-size: 12px;
    }

    .icon-search {
        margin-left: 0;
        order: 99;
        padding: 5px;
    }

    @media (max-width: 480px) {
        .action-buttons .el-button span:not(.el-icon) {
            display: none;
        }

        .el-button :deep(.el-icon) {
            margin-right: 0;
            width: 16px;
            height: 16px;
        }

        :deep(.el-date-editor) {
            --el-input-height: 28px;
        }
    }
}
</style>